<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title>微博签到</title>
    <script include='jquery' src='./static/libs/include-lib-local.js'></script>
    <script include='language,echarts' src='./static/libs/include-mapboxgl-local.js'></script>
    <link href='./static/demo/mapboxgl/example/style.css' rel='stylesheet' type='text/css' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id='map'>
    <div id='mouse-position'>
    </div>
</div>
<script>
    //一定要去mapbox注册一个key,这个key会失效的
    mapboxgl.accessToken =
        'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
    var map = new mapboxgl.Map({
        container: 'map', // 绑定div
        style: 'mapbox://styles/mapbox/dark-v9', // 使用MapBox官方的样式
        center: [106.563777, 29.578285],
        zoom: 3
    });
    map.addControl(new MapboxLanguage(), 'top-right'); //中文支持
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    //注册鼠标移动事件
    map.on('mousemove', function(e) {
        //经纬度坐标转web墨卡托
        const earthRad = 6378137.0;
        const x = e.lngLat.lng * Math.PI / 180 * earthRad;
        const a = e.lngLat.lat * Math.PI / 180;
        const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
        document.getElementById('mouse-position').innerHTML = 'X轴：' + x.toFixed(2) + '，Y轴：' + y.toFixed(2);
    });

    updateView();

    function updateView() {
        var grade = [
            '强',
            '中',
            '弱'
        ];
        var layer;
        $.get('../../static/data/echarts/weibo.geojson', function(weiboData) {
            if (typeof weiboData === 'string') {
                weiboData = JSON.parse(weiboData);
            }
            weiboData = weiboData.map(function(serieData, idx) {
                var px = serieData[0] / 1000;
                var py = serieData[1] / 1000;
                var res = [
                    [px, py]
                ];

                for (var i = 2; i < serieData.length; i += 2) {
                    var dx = serieData[i] / 1000;
                    var dy = serieData[i + 1] / 1000;
                    var x = px + dx;
                    var y = py + dy;
                    res.push([x.toFixed(2), y.toFixed(2), 1]);

                    px = x;
                    py = y;
                }
                return res;
            });

            option = {
                mapboxgl: {
                    roam: true
                },
                coordinateSystem: 'mapboxgl',
                title: {
                    text: '中国微博签到图',
                    subtext: 'From MapGIS',
                    sublink: 'http://www.smaryun.com',
                    left: 'center',
                    top: 'top',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {},
                legend: {
                    left: 'right',
                    top: 'top',
                    data: [grade[0], grade[1], grade[2]],
                    textStyle: {
                        color: '#ccc'
                    }
                },
                series: [{
                    name: grade[2],
                    type: 'scatter',
                    coordinateSystem: 'mapboxgl',
                    symbolSize: 1,
                    large: true,
                    itemStyle: {
                        normal: {
                            shadowBlur: 2,
                            shadowColor: 'rgba(37, 140, 249, 0.8)',
                            color: 'rgba(37, 140, 249, 0.8)'
                        }
                    },
                    data: weiboData[0]
                }, {
                    name: grade[1],
                    type: 'scatter',
                    coordinateSystem: 'mapboxgl',
                    symbolSize: 1,
                    large: true,
                    itemStyle: {
                        normal: {
                            shadowBlur: 2,
                            shadowColor: 'rgba(14, 241, 242, 0.8)',
                            color: 'rgba(14, 241, 242, 0.8)'
                        }
                    },
                    data: weiboData[1]
                }, {
                    name: grade[0],
                    type: 'scatter',
                    coordinateSystem: 'mapboxgl',
                    symbolSize: 1,
                    large: true,
                    itemStyle: {
                        normal: {
                            shadowBlur: 2,
                            shadowColor: 'rgba(255, 255, 255, 0.8)',
                            color: 'rgba(255, 255, 255, 0.8)'
                        }
                    },
                    data: weiboData[2]
                }]
            };
            layer = new mapboxgl.zondy.EchartsLayer(map, option).addTo(map);
        });
    }
</script>


</body>

</html>